<template>
	<view class="container  statusbar-height">
		<view class="header">
			<view class="banner"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/backHeader.png"></image></view>
			<!-- 头部导航与状态栏 -->
			<view class="tab-statusbar" v-if="fromPary.platform && !$wechat.isWechat()">
				<view style="height: 88rpx;"></view>
				<view class="top-tabbar">
					<i class="iconfont" v-if="titleState"></i>
          <i class="iconfont backIcon" @click="backClick" v-else>&#xe641;</i>
					<view class="head-title">开课成功</view>
					<view class="iconfont"></view>
				</view>
			</view>
      <!-- 价格 -->
      <view class="price-name">
        <view class="subheading-price">
          <view class="icon-succeed">
             <view class="iconfont">&#xe644;</view>
             <view class="succeed">报名成功</view>
          </view>
        </view>
        <view class="flow-box">
          <view v-for="(item,index) in flowList" :key="item.id" class="item-list">
            <view class="item-succeed">
              <view class="main-icon"><image mode="aspectFill" :src="item.imgUrl"></image></view>
              <view class="item-title">{{ item.title }}</view>
            </view>
            <view class="arrows" v-if="index!==2"><image :src="item.arrows"></image></view>
          </view>
        </view>
      </view>
		</view>
		
		<view class="main">
      <view class="add-wx-box">
        <view class="subTitle">添加专属辅导员微信</view>
        <view class="titel">开启学习之旅</view>
        <view class="method">
          <view>方法1：二维码添加</view>
          <view>方法2：一键添加</view>
        </view>
        <view class="code-back-img"><image class="img" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/code_back.png"></image></view>
        <view class="code-btn-title">
          <view class="code-back">
            <view class='code-img' @click="clickSearc">
               <image
                show-menu-by-longpress="true"
                style="position: relative;z-index: 10;"
                :src="teacherImg" 
               >
               </image>
             </view>
           </view>
           <view class="teacher">思维专属辅导员</view>
           <view class="coay-name btn-zoom" @click="clickSearc">
             <view class="iconfont loading-animation" v-if="loadingState">&#xe891;</view>
             <view class="copy">点我一键添加</view>
           </view>
        </view>
      </view>
      <!-- 下载app -->
      <view class="download" v-if="$wechat.isWechat()">
        <view class="title">学习请下载【大爆炸思维】</view>
        <view class="subtitle">APP快速下载通道</view>
        <view class="download-wap">
          <view class="click-icon-list" v-for="(item,index) in downIconList" :key="item.id">
            <view class="icon-title">
             <view class="icon-main"><image :src="item.imgUrl"></image></view>
             <view class="flow-title">{{ item.title }}</view>
            </view>
            <view class="arrows" v-if="index!==2"><image :src="item.arrows"></image></view>
          </view>
        </view>
        <view class="clickDownload btn-zoom" @click="download">点我下载app</view>
      </view>
		</view>
    
    <view class="bottom-title">大爆炸思维 版权所有 2021</view>
    
	</view>
</template>

<script>
  import luoButton from '../../components/botton/luo-botton.vue'
  import { pueryPay, buyClass } from '@/utils/api.js'
	export default {
    components: { luoButton },
		data() {
			return {
        wechatState: false, // 是否安装微信
        parameter:'', // 地址参数
        fromPary: {
         phone:'',
         platform: '',
         radid: '',
         rsid:'',
         skuid: '',
         ver:''
        },
        loadingState: false,
        pathJun: '', // 跳转地址
        linkWxUrl: 'weixin://dl/business/?t=gBX7jORYXvt',
        teacherImg:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/APP_%E5%85%AC%E4%BC%97%E5%8F%B7%E5%B7%B2%E8%B4%AD%E4%BD%93%E9%AA%8C%E8%AF%BE.jpg', // 默认是体验课辅导员',
        downIconList: [
          { 
            id: 1, title: '点击下方按钮', 
            imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/click.png', 
            arrows: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/arrows.png'
          },
          { 
            id: 2, title: '浏览器打开链接', 
            imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/link.png', 
            arrows: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/arrows.png'
          },
          { 
            id: 3, title: '完成下载', 
            imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/down.png',
          }
        ],
        flowList: [
          { 
            id: 1, title: '付款成功', 
            imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/payment.png', 
            arrows: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/arrows.png'
          },
          { 
            id: 2, title: '加入班级群', 
            imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/andgrade.png', 
            arrows: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/arrows.png',
          },
          { 
            id: 3, title: '开启学习之旅', 
            imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/study.png' 
          }
        ],
        titleState: uni.getStorageSync("appPlayState"),
        Loop:'',
			}
		},
    onLoad(params) {
      const vm = this
      vm.parameter = window.location.href.split('?')[1].toLowerCase()
       if(vm.$auth.getUrlPrams("platform")) {
        let platform = params.platform.toLowerCase() // 转小写
        vm.fromPary.platform = platform
       }
      if(vm.$auth.getUrlPrams("phonenumber")) {
        vm.fromPary.phone = vm.$auth.getUrlPrams("phonenumber")
        vm.queryCourse(vm.fromPary.phone)
      }
      if(vm.$auth.getUrlPrams("ver")){
        let versions = vm.$auth.getUrlPrams("ver")
        vm.fromPary.ver = versions.replace(/\./g,"")
      }
    },
    mounted() {
      const vm = this
      if(uni.getStorageSync("appPlayState")){
        vm.informApp()
      }
    },
		methods: {
      // 下载app
      download() {
       window.location.replace('https://www.dbz100.com/m')
      },
      // 一键添加
      clickSearc() {
        const vm = this
         if(vm.fromPary.platform == 'ios' || vm.fromPary.platform == 'android') {
           vm.loadingState = true
            let loadDateTime = new Date()
           let iFrame = document.createElement('iframe');
            iFrame.setAttribute('src', vm.linkWxUrl);
            iFrame.setAttribute('style', 'display:none;');
            iFrame.setAttribute('height', '0px');
            iFrame.setAttribute('width', '0px');
            iFrame.setAttribute('frameborder', '0');
            document.body.appendChild(iFrame);
            setTimeout(function() { //如果没有安装app,便会执行setTimeout跳转下载页
              window.document.body.removeChild(iFrame)
              let timeOutDateTime = new Date()
              if (timeOutDateTime - loadDateTime < 5000) {
                vm.loadingState = false
                uni.showToast({  title:'请下载微信客户端！', icon:'none' })
              } else {
                window.close()
              }
            }, 3000)
         }else{
           window.location.replace(vm.linkWxUrl)
         }
      },
      // 通知app刷新
      informApp() {
        const vm = this
        console.log('通知app刷新')
        let ifr = document.getElementById("iframe");
        if(ifr){
          document.body.removeChild(ifr);  
        }
        ifr = document.createElement("iframe");
        let url = "uniwebview://loadMainUrl?type=0&method=loadMainUrl"                              
        ifr.setAttribute('src', url);  
        ifr.setAttribute('style', 'display:none'); 
        ifr.setAttribute('id','iframe');
        document.body.appendChild(ifr); 
      },
      // 返回上一页
      backClick() { 
        const vm = this
        if(vm.fromPary.platform == 'ios'){
          vm.informApp()
        }
        if(vm.fromPary.platform == 'android'){
          if(vm.fromPary.ver){
            let ver = parseInt('0152')
            if(vm.fromPary.ver <= ver){
               uni.navigateTo({
                  url: vm.pathJun
               })
            }else{
               vm.informApp()
            }
          }
        }
      },
      // 查询购买的课程
      queryCourse(phone) {
        const vm = this
        let skunameId = vm.$auth.getUrlPrams("skuid")
        let radid = vm.$auth.getUrlPrams("radid")
        let rsid = vm.$auth.getUrlPrams("rsid")
        let agentid = vm.$auth.getUrlPrams("agentid")
        let staff = vm.$auth.getUrlPrams("staff")
        buyClass(phone).then(res => {
          // 如果ownedSystemCourse系统课为true，显示精品页
          if(res.ownedYearedCourse) {
            vm.linkWxUrl = 'weixin://dl/business/?t=hWfMRiBCGyt'
            vm.teacherImg = 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/%E5%85%AC%E4%BC%97%E5%8F%B7_APP%E5%B7%B2%E8%B4%AD%E6%AD%A3%E4%BB%B7%E8%AF%BE.jpg'
            vm.pathJun = '/pages/home/index?phonenumber='+phone+'&platform='+vm.fromPary.platform+'&ver='+vm.fromPary.ver+'&skuid='+skunameId+'&radid='+radid+'&rsid='+rsid+'&agentid='+agentid+'&staff='+staff
          }else{
            if(res.ownedExperienceCourse){
              vm.linkWxUrl = 'weixin://dl/business/?t=gBX7jORYXvt'
              let skuid = '4a77c1fd-bf3f-a9ab-365d-3a022c667994' // 年课skuid
              vm.pathJun = '/pages/product/detail?phonenumber='+phone+'&platform='+vm.fromPary.platform+'&ver='+vm.fromPary.ver+'&skuid='+skuid+'&radid='+radid+'&rsid='+rsid+'&agentid='+agentid+'&staff='+staff
            }
          }
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.container{
    background: #FFFFFF;
    color: #262626;
    image{
      width: 100%;
      height: 100%;
    }
		.header{
			position: relative;
			.banner{
        width: 100%;
       height: 320rpx;
       background: #FF800C;
       border-radius: 0px 0px 80rpx 80rpx
			}
			.tab-statusbar{
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				.top-tabbar{
					width: 100%;
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #fff;
					padding: 0 24rpx;
          .backIcon{
            font-size: 36rpx;
          }
          .head-title{
            font-size: 36rpx;
          }
				}
			}
		}
		.price-name{
			width: 673rpx;
      background: #FFFFFF;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
      border-radius: 40rpx;
      position: relative;
      margin: auto;
       margin-top: -80rpx;
      padding: 40rpx 40rpx 32rpx 48rpx;
      background: linear-gradient(180deg, #FFFAF4 0%, #FFFDFB 100%);
      .subheading-price{
        .subing{
          color: #8C8C8C;
          font-size: 24rpx;
        }
        .icon-succeed{
          display: flex;
          align-items: center;
          .iconfont{
            color: #FF800C;
            font-size: 40rpx;
          }
          .succeed{
            color: #262626;
            font-size: 32rpx;
            font-weight: bold;
            margin-left: 8rpx;
          }
        }
        .price{
          margin-left: 45rpx;
          .subTitle{
            font-size: 24rpx;
            color:#8C8C8C;
            font-weight: 400;
          }
        }
      }
      .flow-box{
        padding-top: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .item-list{
          display: flex;
          justify-content: center;
          align-items: center;
          .item-succeed{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .main-icon{
             width: 84rpx;
             height: 84rpx;
            }
            .item-title{
              font-size: 20rpx;
              color: #262626;
            }
          }
          .arrows{
            width: 84rpx;
            height: 48rpx;
            margin-bottom: 28rpx;
            margin-left: 10rpx;
          }
        }
      }
		}
    .main{
      margin-top: 40rpx;
      padding:0 40rpx 40rpx 40rpx;
     .add-wx-box{
        width: 100%;
        height: 640rpx;
        border-radius: 40rpx;
        box-shadow: 0px 0px 40rpx rgba(0, 0, 0, 0.08);
        background: linear-gradient(180deg, #FFFAF4 0%, #FFFDFB 100%);
        padding-top: 32rpx;
        text-align: center;
        position: relative;
        overflow: hidden;
       .titel{
         font-weight: bold;
         font-size: 32rpx;
       }
       .subTitle{
         font-size: 24rpx;
         margin-bottom: 8rpx;
       }
       .method{
         font-size: 24rpx;
         color: #8C8C8C;
         margin: 40rpx 0 16rpx 0;
       }
       .code-back-img{
         width: 100%;
         height: 280rpx;
         position: absolute;
         left: 0;
         bottom: 0;
         z-index: 1;
         .img{
           border-radius: 0 0 40rpx 40rpx;
         }
       }
       .code-btn-title{
        position: absolute;
        left: 0;
        right: 0;
        top: 247rpx;
        z-index: 2;
         .code-back{
           width: 216rpx;
           height: 216rpx;
           background: #FFFFFF;
           box-shadow: 0px 4rpx 12rpx rgba(255, 128, 12, 0.17);
           border-radius: 10rpx;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            .code-img{
              width: 198rpx;
              height: 198rpx;
              border-radius: 10rpx;
              background: #C4C4C4;
            }
         }
         .teacher{
           font-size: 28rpx;
           text-align: center;
           margin: 16rpx 0 32rpx 0;
         }
         .coay-name{
           display: flex;
           align-items: center;
           justify-content: center;
           width: 284rpx;
           height: 64rpx;
           text-align: center;
           line-height: 64rpx;
           background:  #FF800C;
           border-radius: 32rpx;
           color: #FFFFFF;
           font-size: 28rpx;
           margin: auto;
           .loading-animation{
             margin-right: 10rpx;
             animation: load 1s linear infinite;
             -moz-animation:load 1s linear infinite;
             -webkit-animation: load 1s linear infinite;
             -o-animation:load 1s linear infinite;
           }
           @-webkit-keyframes load{
             from{-webkit-transform:rotate(0deg);}
             to{-webkit-transform:rotate(360deg);}
           }
           @-moz-keyframes load{
             from{-moz-transform:rotate(0deg);}
             to{-moz-transform:rotate(360deg);}
           }
           @-o-keyframes load{
             from{-o-transform:rotate(0deg);}
             to{-o-transform:rotate(360deg);}
           }
           .copy{
            font-weight: bold;
           }
         }
       }
     }
     // 下载app
     .download{
       width: 100%;
       height: auto;
       border-radius: 40rpx;
       background: linear-gradient(180deg, #FFF8F0 0%, #FFFDFB 100%);
       box-shadow: 0px 0px 40rpx rgba(0, 0, 0, 0.08);
       padding: 32rpx 48rpx;
       text-align: center;
       margin-top: 32rpx;
       .title{
         font-size: 38rpx;
         font-weight: bold;
       }
       .subtitle{
         font-size: 28rpx;
         padding: 32rpx 0 16rpx 0;
       }
       .download-wap{
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 52rpx;
         .click-icon-list{
           display: flex;
           align-items: center;
           .icon-title{
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             .icon-main{
               width: 96rpx;
               height: 96rpx ;
             }
             .flow-title{
               font-size: 20rpx;
             }
           }
           .arrows{
             width: 84rpx;
             height: 48rpx;
             margin: 0 0rpx 20rpx 0;
           }
         }
          .click-icon-list:nth-of-type(2) {
            .arrows{
              margin-right: 20rpx;
            }
           }
       }
       .clickDownload{
         width: 284rpx;
         height: 64rpx;
         line-height: 64rpx;
         text-align: center;
         background:  #FF800C;
         font-weight: bold;
         font-size: 28rpx;
         color: #FFFFFF;
         border-radius: 32rpx;
         margin: auto;
       }
     }
    }
    .bottom-title{
      text-align: center;
      font-weight: bold;
      font-size: 36rpx;
      color: #EEEEEE;
      padding-bottom: 48rpx;
    }
	}
</style>

